<template>
  <div>
    <div class="header" @click="goback">
      <i class="iconfont">&#xe669;</i>
      <span>排行榜</span>
    </div>
    <div class="guanfang">
      <div class="i">
        <h3>官方榜</h3>
        <el-row :gutter="20" class="row-1"
          v-for="(item, index) in list.slice(0, 4)" :key="item.id" @click.native="gosong(index)">
          <el-col :span="7">
            <img :src="item.coverImgUrl" >
          </el-col>
          <el-col :span="16" class="height">
            <div class="line" v-for="(val, index) in item.tracks" :key="index">
              <span>{{index+1}}.</span> <span class="hidden">{{val.first}} - {{val.second}}</span>
            </div>
          </el-col>
        </el-row>
        <!-- 官方榜四个内容 -->
      </div>
    </div>
    <!-- 推荐榜内容 -->
    <div class="tuijian">
      <div class="tuijian-item">
        <h3>推荐榜</h3>
        <div class="item-list">
          <el-row>
            <el-col class="list" :span="8"  v-for="(item, index) in list.slice(4,10)" :key="item.id" @click.native="gosong(index + 23)">
                <img :src="item.coverImgUrl" alt="" srcset="">
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 更多内容 -->
    <div class="gengduo">
      <div class="tuijian-item">
        <h3>更多</h3>
        <div class="item-list">
          <el-row>
            <el-col class="list" :span="8" v-for="(item, index) in list.slice(10,26)" :key="item.id" @click.native="gosong(index + 28)">
              <img :src="item.coverImgUrl" alt="" srcset="">
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'paihang',
  data () {
    return {
      list: []
    }
  },
  components: {
  },
  methods: {
    getdata () {
      this.$axios.get('api/toplist/detail').then(res => {
        console.log(res.data)
        this.list = res.data.list
      })
    },
    goback () {
      this.$router.push({ name: 'index' })
    },
    gosong (index) {
      this.$router.push({ name: 'song', params: { id: index } })
      this.$store.commit('idx', index) // 点击排行榜后，需要把当前点击的索引存储到仓库
    }
  },
  mounted () {
    this.getdata()
  }
}
</script>
<style lang="stylus" scoped>
.header
  height 1.04rem
  line-height 1.04rem
  padding-left .2rem
  font-size .4rem
  font-weight 700
  i
    padding-right .2rem
.guanfang
  padding-left .3rem
.i
  .line
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    width 4.5rem
    line-height .5rem
    height .5rem
  .height
    height 1.85rem
    margin-top .2rem
  img
    width 1.8rem
    height 1.8rem
h3
  margin-bottom .4rem
  font-weight 700
  color black
// 推荐内容
.tuijian
  padding-left .3rem
.tuijian-item
  .item-list
    display flex
    flex-wrap wrap
    .list
      margin-bottom .2rem
  img
    width 2.1rem
    height 2rem
    border-radius .2rem .2rem
  // 更多内容
.gengduo
  padding-left .2rem
</style>
